<template>
	<view class="contain">
		<view class="flex justify-between items-center phone">
			<view class="font-bold">原手机号</view>
			<view>
				<u--input
					type="number"
				    placeholder="请输入"
				    border="none"
				    v-model="phoneValue"
					inputAlign="right"
				  ></u--input>
			</view>
		</view>
		<view class="flex justify-between items-center phone">
			<view class="font-bold shrink w-64">验证码</view>
			<view class="flex-none w-16">
				<u--input
					type="number"
				    placeholder="请输入"
				    border="none"
				    v-model="codeValue"
					inputAlign="right"
				  ></u--input>
			</view>
			<view class="flex-none w-10">
				<text class="text-blue-800 font-bold" @click="sendCode" v-if="!isSend">获取</text>
				<u-count-down v-else :time="60 * 1000" format="ss" autoStart @change="onChange" @finish="finish">
					<view class="time text-sm text-blue-800">
						{{ timeData.seconds }}秒
					</view>
				</u-count-down>
			</view>
		</view>
		<view style="margin:20px auto; width:360px;">
			<u-button type="error" text="确定" shape="circle" @click="submit"></u-button>
		</view>
	</view> <!-- contain end -->
</template>

<script setup lang='ts'>
	import { ref,reactive } from 'vue'
	let timeData=reactive({seconds:0});
	let phoneValue=ref('');
	let codeValue=ref('');
	let isSend=ref(false);
	const onChange=(e:any)=>{
		//console.log("倒计时",e);
		 timeData.seconds=e.seconds;
	}
	const finish=()=>{
		isSend.value=false;
		timeData.seconds=0;
	}
	const sendCode=()=>{
		if(checkPhone()===false) return;
		uni.$tools.toast("验证码已发送 请留意短信");
		timeData.seconds=59;
		isSend.value=true;
	}
	const checkPhone=()=>{
		if(/\S/.test(phoneValue.value)===false){
			uni.$tools.toast("请输入原手机号码");
			return false;
		}
		if(uni.$u.test.mobile(phoneValue.value)===false){
			uni.$tools.toast("手机号码格式不正确");
			return false;
		}
		return true;
	}
	const submit=()=>{
		if(checkPhone()===false) return;
		if(/\S/.test(codeValue.value)===false){
			uni.$tools.toast("请输入验证码");
			return;
		}
		uni.$tools.toast("提交数据");
	}
</script>
<style>
	page{
		background:#f8f8f8;
	}
</style>
<style lang='scss' scoped>
	@import "bindPhone.scss";
</style>